<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的优惠卷</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- px布局 -->
    <!-- <link rel="stylesheet" href="index.css" /> -->
    <!-- rem布局 -->
    <link rel="stylesheet" href="indexrem.css">
  </head>
  <body>
    <div id="app">
      <div class="my-coupon" v-if="couponList.length>0">
        <!-- header -->
        <div class="coupon-tab">
          <div class="tab-item" @click="toggleTab(1)">
            <div class="tab-title">未使用</div>
            <div class="tab-active" v-if="tabStatus===1"></div>
          </div>
          <div class="tab-item" @click="toggleTab(2)">
            <div class="tab-title">已核销</div>
            <div class="tab-active" v-if="tabStatus===2"></div>
          </div>
        </div>

        <!-- 优惠券列表 -->
        <div class="coupon-list">
          <div
            class="coupon-item"
            :class="item.status ==1? 'item-active':''"
            v-for="(item,index) in couponList"
            :key="index"
            @click="gotoDetail(item.id)"
          >
            <div class="item-content">
              <div class="item-left">
                <div class="coupon-price"><span> ￥ </span>{{item.price}}</div>
                <div class="use-text">满{{item.usePrice}}可用</div>
              </div>
              <div class="item-right">
                <div class="coupon-title">
                  【限量】 {{item.price}}元项目抵用券
                </div>
                <div class="use-tips">会员、非会员通用</div>
                <div class="validity-period">
                  有效期{{item.startTime}} 至 {{item.endTime}}
                </div>
              </div>
              <div class="is-new" v-if="item.isNew==1">
                <img src="../image/new.png" alt="" />
              </div>
              <div class="top-img"><img src="../image/top.png" alt="" /></div>
            </div>
            <div class="item-footer">
              <div class="show-detail">查看详情 ></div>
              <div class="coupon-status" v-if="item.status == 1">去使用</div>
              <div class="coupon-status" v-if="item.status == 2">已过期</div>
              <div class="coupon-status" v-if="item.status == 3">已核销</div>
              <div class="bottom-img">
                <img src="../image/bottom.png" alt="" />
              </div>
            </div>
            <div class="item-img" v-if="item.status == 2">
              <img src="../image/expire.png" alt="" />
            </div>
            <div class="item-img" v-if="item.status == 3">
              <img src="../image/used.png" alt="" />
            </div>
          </div>
        </div>

        <div class="empty-status" v-if="couponList.length==0">
          <div class="empty-img">
            <img src="../image/empty.png" alt="" />
          </div>
          <div class="empty-text">没有更多的优惠券啦</div>
        </div>
        <div class="see-invalid" v-if="couponList.length==0">查看失效券></div>
      </div>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data() {
          return {
            tabStatus: 1, // 1 未使用 2 已核销
            couponList: [{
                id: 1,
                isNew: 1, // 新
                price: 100,
                startTime: "2020-11-24",
                endTime: "2021-03-24",
                usePrice: "399",
                status: 1, // 待使用 2 已过期 3 已核销
              },
              {
                id: 2,
                isNew: 0, // 新
                price: 50,
                startTime: "2020-11-24",
                endTime: "2021-03-24",
                usePrice: "200",
                status: 2, // 待使用 2 已过期 3 已核销
              },],
            isUsed: [
              {
                id: 1,
                isNew: 1, // 新
                price: 100,
                startTime: "2020-11-24",
                endTime: "2021-03-24",
                usePrice: "399",
                status: 1, // 待使用 2 已过期 3 已核销
              },
              {
                id: 2,
                isNew: 0, // 新
                price: 50,
                startTime: "2020-11-24",
                endTime: "2021-03-24",
                usePrice: "200",
                status: 2, // 待使用 2 已过期 3 已核销
              },
            ],
            used: [
              {
                id: 3,
                isNew: 0, // 新
                price: 50,
                startTime: "2020-11-24",
                endTime: "2021-03-24",
                usePrice: "200",
                status: 3, // 待使用 2 已过期 3 已核销
              },
            ],
          };
        },

        methods: {
          // 1. 切换项目
          toggleTab(type) {
            this.tabStatus = type;
            this.couponList = type == 1 ? this.isUsed : this.used;
          },
          gotoDetail(id) {
            console.log(id);
            // window.history.pushState('../couponDetail/index.html')
            // window.localtion.href = '../couponDetail/index.html'
            window.location.href = "../couponDetail/index.html?id=" + id;
          }
        },

        components: {},
      });
    </script>
  </body>
</html>
